<template>
  <div id="setSponsor">
    <fieldset class="layui-elem-field layui-field-title">
      <legend>模块类型</legend>
      <div class="layui-field-box">
        <el-radio-group v-model="radio">
          <el-radio-button label="显示标题"></el-radio-button>
          <el-radio-button label="不显示标题"></el-radio-button>
        </el-radio-group>
      </div>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title">
      <legend>模块标题</legend>
      <div class="layui-field-box">
        <el-input v-model="moddata.config.title" placeholder="请输入模块标题"></el-input>
      </div>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title" v-if="pageConfig[pageConfig.theme].layout == 'two'">
      <legend>模块位置</legend>
      <div class="layui-field-box">
        <el-radio-group v-model="moddata.belong">
          <el-radio label="left">左侧</el-radio>
          <el-radio label="right">右侧</el-radio>
        </el-radio-group>
      </div>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title">
      <legend>字体颜色</legend>
      <div class="layui-field-box">
        <el-color-picker v-model="color"></el-color-picker>
      </div>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title">
      <legend>内容</legend>
      <div class="layui-field-box">
        <el-button @click="showuEditer(true)">网页编辑器</el-button>
      </div>
    </fieldset>
    <el-button @click="save" type="primary">保存</el-button>
    <el-button @click="cancel">取消</el-button>
    <transition name="fade">
      <div class="callsponsor" v-show="uEditer">
        <transition name="move">
          <div class="box" v-show="uEditer">
            <p>编辑器</p>
            <i class="el-message-box__close el-icon-close close" @click="showuEditer(false)"></i>
            <div class="content">
              <div class="" id="custom_edit"></div>
            </div>
            <div class="bottombox">
              <el-button @click="showuEditer(false)">取消</el-button>
              <el-button @click="submit" type="primary">确定</el-button>
            </div>
          </div>
        </transition>
      </div>
    </transition>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    // props: ["moddata", "index", "pageconfig"],
    data: function () {
      return {
        // input: this.moddata[this.index].config.title,
        // radio: this.moddata[this.index].config.titleshow ? "显示标题" : "不显示标题",
        // color1: '',
        // color2: this.moddata[this.index].config.fontcolor,
        con: this.$store.state.container.items[this.$store.state.setindex].config.content,
        myEditor: "",
        uEditer: false
      }
    },
    mounted() {
      this.myEditor = UE.getEditor('custom_edit');
    },
    beforeDestroy() {
      this.myEditor.destroy();
    },
    computed: {
      ...mapState([
        "container",
        "setindex",
        "pageConfig"
      ]),
      moddata() {
        return this.container.items[this.setindex]
      },
      belong: {
        get() {
          return this.$store.state.container.items[this.$store.state.setindex].belong
        },
        set(value) {
          this.setModBelong({
            index: this.setindex,
            key: 'belong',
            value: value
          })
        }
      },
      input: {
        get() {
          return this.$store.state.container.items[this.$store.state.setindex].config.title
        },
        set(value) {
          this.setModConfig({
            index: this.setindex,
            key: 'title',
            value: value
          })
        }
      },
      radio: {
        get() {
          return this.$store.state.container.items[this.$store.state.setindex].config.titleshow ? "显示标题" : "不显示标题"
        },
        set(value) {
          if (value == "显示标题") {
            this.setModConfig({
              index: this.setindex,
              key: 'titleshow',
              value: true
            })
          } else if (value == "不显示标题") {
            this.setModConfig({
              index: this.setindex,
              key: 'titleshow',
              value: false
            })
          }
        }
      },
      color: {
        get() {
          return this.$store.state.container.items[this.$store.state.setindex].config.fontcolor
        },
        set(value) {
          this.setModConfig({
            index: this.setindex,
            key: 'fontcolor',
            value: value
          })
        }
      }
    },
    methods: {
      ...mapMutations(['setModConfig', 'cancelEdit', 'setModBelong']),
      // changetype: function () {
      //   if (this.radio == "显示标题") {
      //     this.moddata[this.index].config.titleshow = true;
      //   } else if (this.radio == "不显示标题") {
      //     this.moddata[this.index].config.titleshow = false;
      //   }
      // },
      // changefc: function () {
      //   this.moddata[this.index].config.fontcolor = this.color2
      // },
      cancel: function () {
        this.cancelEdit();
      },
      save: function () {
        this.$store.dispatch('save')
      },
      showuEditer(bol) {
        if (bol) {
          this.myEditor.setContent(this.con);
        }
        this.uEditer = bol;
      },
      submit() {
        var text = this.myEditor.getContent();
        this.con = text;
        // this.moddata[this.index].config.content = text;
        this.setModConfig({
          index: this.setindex,
          key: 'content',
          value: text
        })
        this.uEditer = false;
      }
    }
  }
</script>

<style scope lang="less">
  .callsponsor {
    background: rgba(0, 0, 0, .5);
    transition: width 0.5s;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2001;
    .box {
      text-align: left;
      display: inline-block;
      vertical-align: middle;
      background-color: #fff;
      width: 700px;
      border-radius: 3px;
      font-size: 16px;
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      background: #fff;
      position: relative;
      p {
        padding: 20px 20px 0;
      }
      .content {
        padding: 20px;
        .icon-box {
          margin: 5px;
          .iconset {
            transition: all .4s;
          }
          .iconset:hover {
            transform: translateY(-2%);
            box-shadow: 1px 4px 10px 2px #CCC;
            -webkit-box-shadow: 1px 4px 10px 2px #CCC;
            -moz-box-shadow: 1px 4px 10px 2px #CCC;
          }
        }
      }
      .bottombox {
        padding: 10px 20px 15px;
        text-align: right;
      }
    }
    .close {
      position: absolute;
      top: 19px;
      right: 20px;
      font-size: 13px;
      color: #999;
    }
  }

  .callsponsor:after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
  }

  .fade-enter-active,
  .fade-leave-active,
  .move-enter-active,
  .move-leave-active {
    transition: all .4s
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0
  }

  .move-enter,
  .move-leave-to {
    transform: translateY(-20px);
  }
</style>